<!--
 * @Author: 专送Pro
 * @Date: 2019-08-30 11:03:03
 * @LastEditors: wuzhen
 * @LastEditTime: 2019-08-30 14:14:41
 * @Description: 自定义字段
 -->
<template>
  <div class="custom-fields">
    <Collapse simple @on-change="changeCollapse">
      <Panel hide-arrow>
        <p>
          <span class="primary">自定义字段
            <Icon :type="showFields?'ios-arrow-up':'ios-arrow-down'" /></span>
        </p>
        <div class="flex" style="align-items:center" slot="content">
          <div class="flex-item">
            <CheckboxGroup v-model="fields">
              <Checkbox v-for="(item, index) in customFields" :key="index" :label="item.key" :style="{width: labelWidth + 'px', marginBottom: '10px'}">{{item.title}}</Checkbox>
            </CheckboxGroup>
          </div>
          <div class="fields-btn">
            <Button type="primary" size="small" @click="onSubmit">确认</Button>
            <Button type="default" size="small" style="margin: 0 10px;" @click="onReset">重置</Button>
          </div>
        </div>
      </Panel>
    </Collapse>
  </div>
</template>
<script>
export default {
  props: {
    customFields: {
      type: Array,
      default: () => []
    },
    labelWidth: {
      type: Number,
      default: 110
    },
    defaultFields: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      showFields: false,
      fields: [...[], ...this.defaultFields]
    };
  },
  methods: {
    changeCollapse(value) {
      this.showFields = false;
      if (value.length > 0) {
        this.showFields = true;
      }
    },
    // 确定
    onSubmit() {
      this.$emit('get-fields', this.fields);
    },
    // 重置
    onReset() {
      this.fields = [];
      this.$emit('get-fields', []);
    }
  }
};
</script>

<style lang="less" scoped></style>
